<!--
 * @Author: 张兴国6 11154115+zhangxingguo-6@user.noreply.gitee.com
 * @Date: 2022-07-24 13:57:47
 * @LastEditors: error: git config user.name && git config user.email & please set dead value or install git
 * @LastEditTime: 2022-10-29 15:30:52
 * @FilePath: \gbv\我的\个人网站\contact.html
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>联系我</title>
    <!-- 预加载 -->
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <!-- 公共文件 -->
    <link rel="stylesheet" href="./css/style.css">
    <link rel="stylesheet" href="./css/contact.CSS">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport"
        content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <title>Lite Map</title>

    <!-- <script type="text/javascript"
    src="//api.map.baidu.com/api?ak=RNDdObwrzu99YGOsmvThXQn8c0HwQHp5&type=lite&v=3.0"></script> -->
    <script type="text/javascript"
        src="http://api.map.baidu.com/api?v=3.0&ak=gHoGaCVBIxUMSMKvSYr0XfiZQO1wnPdi"></script>
    <style type="text/css">

    </style>
   
</head>

<body>
    <!-- 加载动画 -->
    <div class="preloader"></div>
  
    <!-- ======= Header ======= -->
    <header id="header">

    </header><!-- End Header -->
    <section id="search">
        <main>

            <div id="particles-js"></div>
            <h2 class="section-title">联系我</h2>
            <h4 class="sub-title">简要说明简要说明简要说明简要说明简要说明简要说明简要说明简要说明....</h4>


        </main>
        <div id="container" class="container1"></div>
        <div class="title-div flex">
            <ul class="flex">
                <li><img src="./images/contact/定位.png" alt="" id="img1">
                    <p id="p1">地址</p> <span id="p2">黑龙江工程学院</span>
                </li>
                <li><img src="images/contact/邮箱.png" alt="" id="img2">
                    <p id="p1">Email </p> <span id="p2">3181845089@qq.com</span>
                </li>
                <li><img src="./images/contact/电话.png" alt="" id="img3">
                    <p id="p1">Call</p> <span id="p2">15734512582</span>
                </li>
            </ul>
        </div>
        <div id="contact-div" class="flex">
            <div><input class="contact-input" id="input1" type="text" placeholder="你的名字"><input
                    class="contact-input contact-input1" type="text" placeholder="你的邮箱"></div>
            <div>
                <input id="input3" type="text" placeholder="主题">
                <input id="input4" type="text" placeholder="内容">
            </div>

            <button id="btn"> 发送</button>
        </div>
        <!-- ======= Footer ======= -->
        <footer>
            <div id="footer">
                <p class="foot">© Copyright 王小明. All Rights Reserved</p>
            </div>
        </footer>
        <!-- End Footer -->
        <div id="up" hidden></div>

    </section>


    <script src="./js/main.js"></script>
    <script type="text/javascript">
        let map = new BMap.Map('container');
        console.log(map);

        // 创建地图实例
        var point = new BMap.Point(126.69387,45.792091);
        // 创建点坐标
        map.centerAndZoom(point, 17);
        map.enableScrollWheelZoom(true);
        mapWheel()
        let mapZoom = 10//地图的缩放级别

        //鼠标滚动致使地图上的放大缩小---缩放区间在4-19之间
        function mapWheel(params) {
            document.querySelector('#container').onmousewheel = e => {
                //放大 getZoom返回地图当前缩放级别
                if (e.wheelDelta > 0) {
                    mapZoom = map.getZoom() + 1

                    if (mapZoom > 19) {
                        mapZoom = 19
                        alert('地图级别在4-19之间')
                    }
                }
                //缩小
                if (e.wheelDelta < 0) {
                    mapZoom = map.getZoom() - 1

                    if (mapZoom < 4) {
                        mapZoom = 4
                        alert('地图级别在4-19之间')
                    }
                }
            }
        }
        // 初始化地图， 设置中心点坐标和地图级别

        // 接口
        const btn = document.querySelector('#btn')
        const input1 = document.querySelector('#input1')
        const input3 = document.querySelector('#input3')
        const input4 = document.querySelector('#input4')
        const input = document.querySelector('#contact-div .contact-input1')
        console.log(input);
        btn.addEventListener('click', function () {
            axios.post('http://81.70.162.221:3000/postMessage',).then(function (res) {
                if (res.data == 'success') {
                    console.log('1111');
                    alert('您已成功发送您的留言')
                }
            });
            input1.value = ''
            input3.value = ''
            input4.value = ''
            input.value = ''
        })
        //  预加载 
        //低版本jquery用的是$(window).load()函数，高版本用的是$(window).on()
        $(window).on('load', function handlePreloader() {
            if ($('.preloader').length) {
                $('.preloader').delay(200).fadeOut(500);
            }
        });
    </script>

    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

</body>

</html>